<template>
  <view v-if="shenheStatus == 0 && cardData" class="card-detail">
    <!-- 头部卡片信息 -->
    <view class="card">
      <image :src="cardData.bg_pic_url" alt="" mode="aspectFill" />
      <view>
        <view class="card-top flex-x-sb">
          <view class="left flex1 flex">
            <image :src="cardData.pic_url" alt="" mode="aspectFill" />
            <view style="flex: 1; margin-left: 20rpx">
              <view style="font-size: 32rpx; font-weight: 600">{{
                cardData.name
              }}</view>
            </view>
          </view>
        </view>

        <!-- <view class="bianma">
          <span v-show="cardData.verify_card_info.type > 1">{{
            cardData.card_info.user
          }}</span>
        </view> -->
      </view>
    </view>
    <!-- 中间数量部分 -->
    <view class="card-num flex-y-center">
      <view class="content flex-y-center flex-x-sb">
        <view>
          <view>剩余次数</view>
          <view
            class="num"
            :class="[cardData.left_num === '0' ? 'disabled' : '']"
          >
            {{ cardData.num }}
          </view>
        </view>
      </view>
    </view>
    <!-- 底部链接 -->
    <view class="bottom">
      <!-- <view
        @click="
          $utils.toUrl(
            '/user/write_off_card/card-list/password-card?id=' + cardData.id
          )
        "
        class="flex-x-sb"

      >
        <view>{{ $t("user.cardPass") }}</view>
        <view class="iconfont icon-arrow-right"></view>
      </view> -->
      <!-- <view
        @click="
          $utils.toUrl(
            '/user/write_off_card/card-list/record-card?id=' + cardData.id
          )
        "
        class="flex-x-sb"
      >
        <view>{{$t('writeOff.records')}}</view>
        <view class="iconfont icon-arrow-right"></view>
      </view> -->
      <view class="flex-x-sb share" v-if="!isShare">
        <button open-type="share" @click="onGive"></button>
        <view> {{ $t("user.sendFri") }} </view>
        <view class="iconfont icon-arrow-right"></view>
      </view>
      <view @click="toMessage" class="flex-x-sb">
        <view> {{ $t("user.moreInfo") }} </view>
        <view class="iconfont icon-arrow-right"></view>
      </view>
      <!-- 删除卡券 -->
      <!-- <view @click="deleteItem" class="flex-x-sb" v-if="status != 2">
        <view> {{ $t("writeOff.deleteCard") }} </view>
        <view class="iconfont icon-arrow-right"></view>
      </view> -->
    </view>
    <button class="btn" @click="toWrite" v-if="isShare">点击领取</button>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      card_id: "",
      cardData: "",
      status: "",
      store_info: "",
      user_id: "",
      isShare: false,
      share_user_id: "",
    };
  },
  // 1核销卡  2礼品卡  3储值卡  4虚拟卡  5视频卡
  computed: {
    // getCouponText() {
    //   let { cardData } = this;
    //   if (!cardData) return;
    //   let str1;
    //   switch (cardData.verify_card_info.type) {
    //     case 2:
    //       str1 = this.$t("coupon.pickUpGoods");
    //       break;
    //     case 3:
    //       str1 = this.$t("coupon.recharge");
    //       break;
    //     case 4:
    //       str1 = this.$t("coupon.see");
    //       break;
    //     case 5:
    //       str1 = this.$t("coupon.watchOnline");
    //       break;
    //   }
    //   if (cardData.status == 1) {
    //     str1 = this.$t("coupon.used");
    //   }
    //   return str1;
    // },
  },

  methods: {
    // see(){
    //   let {address,name,coordinate} = this.store_info,
    //     [latitude,longitude] = coordinate.split(",");

    //   uni.openLocation({
    //     name,
    //     latitude:parseFloat(latitude),
    //     longitude:parseFloat(longitude),
    //     address,
    //   });
    // },
    async toWrite() {
      const res = await this.$allrequest.coupon.reveiceWirte(
          {
            id: this.card_id,
            share_user_id: this.share_user_id,
          },
          true
      );
      if (res.code == 0) {
        this.$utils.toast("领取成功");
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
      }
    },
    toMessage() {
      this.$utils.toUrl(
        `/user/write_off_card/write_message?begin_time=${this.cardData.begin_time}&end_time=${this.cardData.begin_time}&content=${this.cardData.content}&price=${this.cardData.price}`
      );
    },
    // 点击查看核销次数
    toNum() {
      if (this.status == 1 || this.status == 2) {
        uni.showToast({
          title: "该卡券不可用",
          icon: "none",
        });
        return;
      }

      if (this.cardData.left_num === "0") return;

      this.$utils.toUrl(
        "/user/write_off_card/card-list/clerk-record?id=" + this.card_id
      );
    },
    // 已兑换的点击数量跳转
    onGo() {
      if (this.status == 1 || this.status == 2) {
        uni.showToast({
          title: "该卡券不可用",
          icon: "none",
        });
        return;
      }
      if (
        this.cardData.verify_card_info.type == 5 &&
        this.cardData.status == 1
      ) {
        if (this.cardData.video_status == 1) {
          uni.showToast({
            title: "该视频卡已过期！",
            duration: 3000,
            icon: "none",
          });
          return;
        }
        this.$utils.toUrl(
          "/user/write_off_card/card-list/video-card?id=" + this.cardData.id
        );
        return;
      }

      if (this.cardData.verify_card_info.type == 2) {
        this.$utils.toUrl(
          "/user/write_off_card/card-list/shop-card?id=" + this.cardData.id
        );
        return;
      }
    },
    // 获取数据详情
    async getDetail() {
      try {
        const { data } = await this.$allrequest.coupon.getWriteDetail(
          {
            id: this.card_id,
          },
          true
        );
        this.cardData = data;
        // this.store_info = data.store_info;
      } catch (error) {
        this.$utils.toast(error.msg || error);
      }
    },
    // 立即兑换
    clickExchange() {
      if (this.status == 1 || this.status == 2) {
        uni.showToast({
          title: "该卡券不可用",
          icon: "none",
        });
        return;
      }
      if (this.cardData.status == 1) {
        if (this.cardData.verify_card_info.type == 5) {
          if (this.cardData.video_status == 1) {
            uni.showToast({
              title: "该视频卡已过期！",
              duration: 3000,
              icon: "none",
            });
            return;
          }
          this.$utils.toUrl(
            "/user/write_off_card/card-list/video-card?id=" + this.cardData.id
          );
        }
        if (this.cardData.verify_card_info.type == 2) {
          this.$utils.toUrl(
            "/user/write_off_card/card-list/shop-card?id=" + this.cardData.id
          );
        }
        return;
      }
      // 1核销卡  2礼品卡  3储值卡  4虚拟卡  5视频卡
      if (this.cardData.verify_card_info.type == 3) {
        // this.$utils.toUrl(
        //   "/user/write_off_card/card-list/exchange-card?id=" + this.cardData.id
        // );
        uni.showModal({
          title: "提示",
          content: "确认充值？",
          success: (res) => {
            if (res.confirm) {
              this.$allrequest.coupon
                .verifyExchange({
                  sale_id: this.cardData.id,
                })
                .then((res) => {
                  if (!res.code) {
                    uni.showToast({
                      title: "充值成功！",
                      duration: 2000,
                    });
                    this.getDetail();
                  }
                });
            } else if (res.cancel) {
            }
          },
        });
        return;
      }
      if (this.cardData.verify_card_info.type == 2) {
        this.$utils.toUrl(
          "/user/write_off_card/card-list/shop-card?id=" + this.cardData.id
        );
      }
      if (this.cardData.verify_card_info.type == 4) {
        this.$utils.toUrl(
          "/user/write_off_card/card-list/password-card?id=" + this.cardData.id
        );
      }
      if (this.cardData.verify_card_info.type == 5) {
        uni.showModal({
          title: "提示",
          content: "兑换之后将不可赠送，确认兑换？",
          success: (res) => {
            if (res.confirm) {
              this.$allrequest.coupon
                .verifyExchange({
                  sale_id: this.cardData.id,
                })
                .then((res) => {
                  if (!res.code) {
                    uni.showToast({
                      title: "兑换成功！",
                      duration: 2000,
                    });
                    this.getDetail();
                  }
                });
            } else if (res.cancel) {
            }
          },
        });
        return;
      }
    },
    // 赠送好友
    onGive() {
      // #ifdef APP-PLUS
      uni.share({
        provider: "weixin",
        type: 0,
        href: "/user/write_off_card/card-list/get-card?id=" + this.cardData.id,
        scene: "WXSceneSession",
        title: this.$t("user.sendYou"),
        imageUrl: this.cardData.verify_card_info.bg_pic_url
      });
      // #endif
    },
  },
  onLoad(params) {
    this.card_id = params?.id;
    this.getDetail();
    let user_id = this.$store.getters.userInfo.id;
    if (params.user_id && params.user_id != user_id) {
      this.isShare = true;
      this.share_user_id = params.user_id;
    } else {
      this.user_id = user_id;
      this.isShare = false;
    }
  },
  onShareAppMessage(res) {
    if (res.from == "button") {
      const storeId = uni.getStorageSync("store_id");
      return {
        title: "赠送卡券",
        path: `/user/write_off_card/write_detail?user_id=${this.user_id}&id=${this.cardData.id}`,
        success(res) {
          uni.showToast({
            title: this.$t("home.success"),
          });
        },
        fail(res) {
          uni.showToast({
            title: this.$t("home.fail"),
            icon: "none",
          });
        },
      };
    }
  },
};
</script>

<style lang="scss" scoped>
.card-detail {
  background: #fff;
  padding: 16rpx 24rpx;
  .icon-arrow-right {
    color: #888;
    font-size: 26rpx;
  }
}
.card-num {
  height: 196rpx;
  > .content {
    flex: 1;
    > view {
      flex: 1;
      height: 100rpx;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #8c8c8c;
      font-size: 26rpx;
      &:nth-child(2) {
        border-left: 1px solid #f1f1f1;
      }
      .num {
        color: #f0250e;
        font-size: 32rpx;
      }

      .disabled {
        color: #8c8c8c;
      }
    }
  }
}
.card {
  position: relative;
  height: 380rpx;
  border-radius: 20rpx;
  margin: 20rpx 0;
  overflow: hidden;
  color: #fff;
  > image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
  }
  > view {
    position: absolute;
    width: 100%;
    height: 100%;
    .card-top {
      margin: 30rpx;
      .left {
        > image {
          width: 92rpx;
          height: 92rpx;
          background: #ffffff;
          border: 2rpx solid #f1f1f1;
          opacity: 1;
          border-radius: 120rpx;
        }
      }
      .code {
        width: 34rpx;
        height: 34rpx;
      }
    }
  }
  .bianma {
    position: absolute;
    bottom: 30rpx;
    left: 30rpx;
  }
}
.bottom {
  > view {
    line-height: 100rpx;
    border-bottom: 1px solid #f1f1f1;
    font-style: 30rpx;
    &:nth-child(1) {
      border-top: 1px solid #f1f1f1;
    }
  }
}
.share {
  position: relative;
  button {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
.btn {
  width: 400rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fff;
  margin: 30rpx auto;
  background: red;
  border-radius: 50rpx;
  font-size: 36rpx;
  font-weight: 700;
}
</style>
